<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频中心</title>
    <link href="../css/main.css" rel="stylesheet">
    <script src="../js/jquery.js"></script>
    <!--<script src="../js/html5media.min.js.js"></script>-->
</head>
<body>
<!-- 头部导航 -->
<div class="nav_box">
    <div class="logo"><img src="../img/main_logo.png"></div>
    <div class="nav_right">
        <dl>
            <dd><a href="../index.html">首页</a></dd>
            <dd><a href="../About/introduction.html">关于我们</a></dd>
            <dd><a href="../Driver/driver.html">车手介绍</a></dd>
            <dd><a href="../Program/Program.html">节目介绍</a></dd>
            <dd><a href="../Media/Media.html">媒体中心</a></dd>
            <dd><a href="../Culture/Automobile_culture.html">汽车文化</a></dd>
            <dd><a href="../video/video_list.html">视频中心</a></dd>
            <dd><a href="../gallery/gallery_list.html">精彩图库</a></dd>
            <dd><a href="../entertainment/entertainment.html">休闲娱乐</a></dd>
            <dd><a href="../order/Product.html">产品预定</a></dd>
        </dl>
    </div>
</div>
<!-- 头部导航结束 -->
<!-- banner图 -->
<div class="banner_box" style="background-image:url('../img/banner_1.jpg');">

</div>
<!-- banner结束 -->
<!-- 正文内容开始 -->
<div class="main_box">
    <div class="main_content">
        <div class="piti_box clearfix">
            <h3>shipin</h3>
            <p>视频中心</p>
        </div>
        <div class="piti_m clearfix">
            <h3>Video collection</h3>
        </div>
        <div class="hdbox clearfix">
            <ul>
                <li class="active"><span>/</span><a href="#">视频集锦</a> <span>/</span></li>
            </ul>
        </div>
        <div class="bdbox videoBox">
          <div class="video_box">
             <ul>
               <li>
                   <a href="#">
                       <div class="video_img">
                           <embed src='http://player.youku.com/player.php/sid/XMzAwMDQxMTQyOA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
                           <div class="video_mask"><em></em></div>
                       </div>
                       <p>张家界Passion汽车特技表演城</p>
                       <span></span>
                   </a>
               </li>
               <li>
                   <a href="#">
                       <div class="video_img">
                         <img src="../img/video1.jpg">
                           <div class="video_mask"><em></em></div>
                       </div>
                       <p>张家界Passion汽车特技表演城</p>
                        <span></span>
                   </a>
               </li>
               <li>
                   <a href="#">
                       <div class="video_img">
                           <img src="../img/video2.jpg">
                           <div class="video_mask"><em></em></div>
                       </div>
                       <p>法国现场视频</p>
                       <span></span>
                   </a>
               </li>
                 <li>
                     <a href="#">
                         <div class="video_img">
                             <img src="../img/video3.jpg">
                             <div class="video_mask"><em></em></div>
                         </div>
                         <p>张家界Passion汽车特技表演城</p>
                         <span></span>
                     </a>
                 </li>
                 <li data-src="../img/video.mp4">
                     <a href="#">
                         <div class="video_img">
                             <img src="../img/video4.jpg">
                             <div class="video_mask"><em></em></div>
                         </div>
                         <p>张家界Passion汽车特技表演城aaaaa</p>
                         <span></span>
                     </a>
                 </li>
                 <li data-src="../img/video111.mp4">
                     <a href="#">
                         <div class="video_img">
                             <img src="../img/video5.jpg">
                             <div class="video_mask"><em></em></div>
                         </div>
                         <p>张家界Passion汽车特技表演城bbbbb</p>
                         <span></span>
                     </a>
                 </li>
                 <li>
                     <a href="#">
                         <div class="video_img">
                             <img src="../img/video6.jpg">
                             <div class="video_mask"><em></em></div>
                         </div>
                         <p>张家界Passion汽车特技表演城</p>
                         <span></span>
                     </a>
                 </li>
             </ul>
          </div>
            <div class="page fot_top">
                <a href="#" class="page_on">1</a>
                <a href="#">2</a>
                <a href="#" class="page_mo">></a>
            </div>
        </div>
    </div>
</div>
<!-- 正文内容结束 -->

<!-- 尾部版权信息 -->
<div class="footer fot_top">
    <div class="fot_box">
        <dl>
            <dd><a href="#">汽车文化</a><span></span></dd>
            <dd><a href="#">休闲娱乐</a><span></span></dd>
            <dd><a href="#">产品预定</a></dd>
        </dl>
        <p><span class="fl"><img src="../img/fot1.png"></span>©Copyright2017张家界博裕隆文化传媒有限责任公司版权所有<b>湘ICP备05011961号</b><a class="cl" href="#">技术支持：湖南畅旅 </a><span class="fr"><img src="../img/fot1.png"></span></p>
    </div>
</div>
<!-- 尾部版权结束 -->
<!--视频弹出遮罩事件-->
 <div class="Mask_video">
     <div class="video_bf">
       <a href="#">
         <span id="close" class="close"><img src="../img/close.png"></span>
           <div id="video_sp"></div>
       </a>
     </div>
 </div>
<!--视频弹出结束-->

<!--视频弹出事件-->
<script>
    $(function () {
        $('.video_box li').click(function () {
            if($(this).attr('data-src')) {
                var str = '<video class="video_play" id="video_bf" controls preload> <source src="' + $(this).attr('data-src') + '" type="video/mp4"> </video>'; //存储视频地址
            }else{
                var str = $(this).find('.video_img').html()
            }
            $('.Mask_video').fadeIn();
           $('#video_sp').html(str);
        });
        $('#close').on('click',function(){
            var bfVideo=document.getElementById("video_bf");
                bfVideo.muted=true;
            $('.Mask_video').fadeOut();
        });
        $('.Mask_video').on('click',function(){
            $('.Mask_video').fadeOut();
            return false
        });
        $('.video_bf').on('click',function(){
            var bfVideo=document.getElementById("video_bf");   //解决在火狐浏览器下点击播放关闭的原因
            bfVideo.play();
            return false
        })
    });
</script>
</body>
</html>